<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        position: fixed;/* 使元素的宽高由内容撑开*/
        top: 50%;
        left: 50%;
        background-color: red;
        width: 50%;
        height: 50%;
        transform: translateX(-50%) translateY(-50%);
        /* top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
        translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */
        justify-content:center;
        align-items:center;
        display:-webkit-flex;
    }
</style>
<body>
    <div class="container">
    <p>justify-content:center;//子元素水平居中<br>
        align-items:center;//子元素垂直居中<br>
        display:-webkit-flex;<br><br>
        <b>在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。<b>

    </p>
    </div>
</body>
</html>